<template>
  <div class="list">
    <Input style="background: #21b97a; top: 0"></Input>
    <!-- 导航 -->
    <van-sticky style="margin-top: 54px">
      <van-dropdown-menu active-color="#21b97a">
        <van-dropdown-item title="区域" ref="dropdown">
          <van-picker
            confirm-button-text=" "
            cancel-button-text=" "
            :columns="areaList"
            value-key="label"
            ref="areaData"
          >
            <template #columns-bottom>
              <div style="display: flex">
                <van-button style="flex: 1" type="default" @click="cancel"
                  >取消</van-button
                >
                <van-button
                  style="flex: 2"
                  type="primary"
                  size="large"
                  @click="confirm"
                  >确认</van-button
                >
              </div>
            </template>
          </van-picker>
        </van-dropdown-item>

        <van-dropdown-item title="方式" ref="dropdown1">
          <van-picker
            confirm-button-text=" "
            cancel-button-text=" "
            :columns="rentType"
            value-key="label"
            ref="rentData"
          >
            <template #columns-bottom>
              <div style="display: flex">
                <van-button style="flex: 1" type="default" @click="cancel1"
                  >取消</van-button
                >
                <van-button
                  style="flex: 2"
                  type="primary"
                  size="large"
                  @click="confirm1"
                  >确认</van-button
                >
              </div>
            </template>
          </van-picker>
        </van-dropdown-item>

        <van-dropdown-item title="租金" ref="dropdown2">
          <van-picker
            confirm-button-text=" "
            cancel-button-text=" "
            :columns="price"
            value-key="label"
            ref="priceData"
          >
            <template #columns-bottom>
              <div style="display: flex">
                <van-button style="flex: 1" type="default" @click="cancel2"
                  >取消</van-button
                >
                <van-button
                  style="flex: 2"
                  type="primary"
                  size="large"
                  @click="confirm2"
                  >确认</van-button
                >
              </div>
            </template>
          </van-picker>
        </van-dropdown-item>

        <van-dropdown-item
          title="筛选"
          duration="0"
          class="Filter_style"
          ref="dropdown3"
        >
          <dl class="FilterList">
            <dt class="title">户型</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in huxingList"
                  :key="item.value"
                  >{{ item.label }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <dl class="FilterList">
            <dt class="title">朝向</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in fxList"
                  :key="item.value"
                  >{{ item.label }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <dl class="FilterList">
            <dt class="title">楼层</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in floorList"
                  :key="item.value"
                  >{{ item.label }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <dl class="FilterList">
            <dt class="title" characteristicList>房屋亮点</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in ldList"
                  :key="item.value"
                >
                  {{ item.label }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <div class="anniu">
            <van-button
              type="default"
              style="width: 40%; color: #21b97a"
              @click="cancel3"
              >取消</van-button
            >
            <van-button type="primary" style="width: 60%" @click="confirm3"
              >确定</van-button
            >
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <!-- 列表区域 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="100"
      :immediate-check="false"
    >
      <myList :list="list" />
    </van-list>
  </div>
</template>

<script>
import Input from "@/components/Input";
import myList from "@/components/myList";

import { housenavAPI, houseInfoAPI } from "@/api";

export default {
  components: { Input, myList },
  data() {
    return {
      loading: false,
      finished: false,
      areaList: [],
      rentType: [],
      price: [],
      list: [],
      huxingList: [],
      ldList: [],
      floorList: [],
      fxList: [],
      params: {
        cityId: this.$store.state.area.id,
        area: "",
        subway: "",
        rentType: "",
        price: "",
      },
      start: 1,
      end: 10,
    };
  },
  async created() {
    this.gethousenavAPI();
    // 初次渲染页面的时候 拿前十条数据
    try {
      const res = await this.gethouseInfoAPI({
        ...this.params,
        start: 1,
        end: 10,
      });
      this.list = res.list;
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    // 导航
    async gethousenavAPI() {
      try {
        const res = await housenavAPI({
          id: this.params.cityId,
        });
        // console.log(res.data.body);
        const {
          area,
          subway,
          price,
          rentType,
          characteristic,
          floor,
          oriented,
          roomType,
        } = res.data.body;
        // console.log(this.handleData(area));
        this.areaList.push(this.handleData(area), this.handleData(subway));
        this.price = price;
        this.rentType = rentType;
        this.huxingList = roomType;
        this.ldList = characteristic;
        this.floorList = floor;
        this.fxList = oriented;
      } catch (e) {
        console.log(e);
      }
    },
    // 处理三级列表的导航
    handleData(obj) {
      obj.children[0].children = [{ label: "" }];
      return obj;
    },

    // 封装房屋信息请求方法
    async gethouseInfoAPI(params) {
      try {
        let res = await houseInfoAPI(params);
        // this.list = res.data.body.list;
        return res.data.body;
      } catch (error) {
        console.log(error);
      }
    },
    // 加载时触发load事件
    async onLoad() {
      console.log(1);

      // 1.每次加载时偏移量+10
      this.start += 10;
      this.end += 10;
      // 2.发送下一页的请求
      try {
        const res = await this.gethouseInfoAPI({
          ...this.params,
          start: this.start,
          end: this.end,
        });
        if (!res || res.count <= this.end) {
          // 激活加载状态
          this.loading = false;
          this.finished = true;
        }
        // 3.处理渲染
        this.list = [...this.list, ...res.list];
      } catch (error) {
        console.log(error);
      } finally {
        // 4.激活加载状态
        this.loading = false;
      }
    },
    confirm() {
      this.$refs.dropdown.toggle();
      const res = this.$refs.areaData.getValues();
      // 判断不同情况下的选择
      // console.log(res);
      if (res.value === "area") {
        this.params.subway = "";
        if (res[1].value === "null") {
          return;
        } else {
          if (res[res.length - 1].value === "null") {
            this.params.area = res[1].value;
          } else {
            this.params.area = res[res.length - 1].value;
          }
        }
      } else {
        this.params.area = "";
        if (res[1].value === "null") {
          return;
        } else {
          if (res[res.length - 1].value === "null") {
            this.params.subway = res[1].value;
          } else {
            this.params.subway = res[res.length - 1].value;
          }
        }
      }
    },
    cancel() {
      this.$refs.dropdown.toggle();
    },
    confirm1() {
      this.$refs.dropdown1.toggle();
      const res = this.$refs.rentData.getValues();
      if (res[0].value === "null") {
        return;
      } else {
        this.params.rentType = res[0].value;
      }
    },
    cancel1() {
      this.$refs.dropdown1.toggle();
    },
    confirm2() {
      this.$refs.dropdown2.toggle();
      const res = this.$refs.priceData.getValues();
      console.log(res);
      this.params.price = res[0].value;
    },
    cancel2() {
      this.$refs.dropdown2.toggle();
    },
    confirm3() {
      this.$refs.dropdown3.toggle();
    },
    cancel3() {
      this.$refs.dropdown3.toggle();
    },
  },
  watch: {
    params: {
      deep: true,
      async handler() {
        try {
          const res = await this.gethouseInfoAPI({
            ...this.params,
            start: 1,
            end: 10,
          });
          this.list = res.list;
        } catch (error) {
          console.log(error);
        }
      },
    },
  },
};
</script>

<style scoped lang="less">
.list {
  .van-dropdown-menu__bar--opened {
    z-index: 2;
  }
  :deep(.van-list) {
    max-height: calc(100vh - 54px - 48px - 50px);
    padding-bottom: 50px;
    overflow: auto;
  }
  :deep(.Filter_style) {
    .van-dropdown-item--down {
      top: 0px !important;
    }
    .van-dropdown-item__content {
      position: fixed;
      height: 100%;
      max-height: 100%;
      transition-duration: 0s !important;
      padding-bottom: 60px;
      .FilterList {
        padding: 0 15px;
        .title {
          margin: 20px 0;
        }
        .select {
          padding-bottom: 14px;
          padding-right: 50px;
          border-bottom: 1px solid #ccc;
          .item {
            width: 70px;
            height: 32px;
            border: 1px solid #ccc;
            margin: 10px;
            text-align: center;
            line-height: 32px;
            font-size: 12px;
            color: #888;
          }
          .itemActive {
            border: 1px solid #21b97a;
            color: #21b97a;
            background-color: #defaef;
          }
        }
      }
    }
    .van-popup--top {
      top: 0;
      left: 75px;
      width: 80%;
    }
    .btn {
      z-index: 66;
      display: flex;
      position: fixed;
      right: 0;
      bottom: 0;
      background: skyblue;
      width: 80%;
      border-top: 1px solid #ccc;
      height: 50px;
      text-align: center;
      line-height: 50px;
      .left {
        flex: 3;
        background: #fff;
        color: #21b97a;
      }
      .right {
        flex: 6;
        background: #21b97a;
        color: #fff;
      }
    }
    .palceholder {
      height: 60px;
    }
  }
  .anniu {
    width: 100%;
    position: sticky;
    bottom: 0;
  }
}
</style>
